<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="blog/yummy-jekyll/header::header('首页','My Blog')"></div>
<script th:src="@{/blog/plugins/search/search.js}"></script>
<link rel="stylesheet" th:href="@{/blog/yummy-jekyll/assets/css/base.css}">
<body>
<div class="content">
    <section class="jumbotron" th:style="'background:url(' + @{/blog/yummy-jekyll/assets/images/header.jpg} + ');background-repeat:no-repeat;background-size:100% 100%;background-attachment: fixed;'">
        <div class="container">
            <h3>hello kitty</h3>
        </div>
    </section>
    <section class="content container">

        <div class="row">
            <!-- Post List -->
            <div class="col-md-8">
                <ol class="post-list">
                    <th:block th:if="${null != page}">
                        <th:block th:each="blog : ${page.getRecords()}">
                            <li class="post-list-item">
                                <h3 class="post-list-title">
                                    <a class="hvr-underline-from-center" th:href="@{'/blog/' + ${blog.getId()}}">
                                        <th:block th:text="${blog.getTitle()}"></th:block>
                                    </a>
                                </h3>
                                <p class="post-list-cover-img">
                                    <a th:href="@{'/blog/' + ${blog.getId()}}"> </a>
                                </p>
                                <p class="post-list-meta">
                                    <span class="octicon octicon-calendar"
                                          th:text="${#dates.format(blog.getCreateTime(), 'yyyy-MM-dd')}"></span>
                                </p>
                            </li>
                        </th:block>
                    </th:block>
                </ol>

                <!-- Pagination -->
                <th:block th:if="${null != page}">
                <ul class="pagination text-align">
                    <li th:class="${page.getCurrent()==1}?'disabled' : ''"><a
                            th:href="@{${page.getCurrent()==1}?'##':'/page/' + ${page.getCurrent()-1}}">&laquo;</a>
                    </li>
                    <li th:if="${page.getCurrent()-3 >=1}"><a
                            th:href="@{'/page/' + ${page.getCurrent()-3}}"
                            th:text="${page.getCurrent() -3}">1</a></li>
                    <li th:if="${page.getCurrent()-2 >=1}"><a
                            th:href="@{'/page/' + ${page.getCurrent()-2}}"
                            th:text="${page.getCurrent() -2}">1</a></li>
                    <li th:if="${page.getCurrent()-1 >=1}"><a
                            th:href="@{'/page/' + ${page.getCurrent()-1}}"
                            th:text="${page.getCurrent() -1}">1</a></li>
                    <li class="active"><a href="#" th:text="${page.getCurrent()}">1</a></li>
                    <li th:if="${page.getCurrent()+1 <=page.getTotal()}"><a
                            th:href="@{'/page/' + ${page.getCurrent()+1}}"
                            th:text="${page.getCurrent() +1}">1</a></li>
                    <li th:if="${page.getCurrent()+2 <=page.getTotal()}"><a
                            th:href="@{'/page/' + ${page.getCurrent()+2}}"
                            th:text="${page.getCurrent() +2}">1</a></li>
                    <li th:if="${page.getCurrent()+3 <=page.getTotal()}"><a
                            th:href="@{'/page/' + ${page.getCurrent()+3}}"
                            th:text="${page.getCurrent() +3}">1</a></li>
                    <li th:class="${page.getCurrent()==page.getTotal()}?'disabled' : ''"><a
                            th:href="@{${page.getCurrent()==page.getTotal()}?'##' : '/page/' + ${page.getCurrent()+1}}">&raquo;</a>
                    </li>
                </ul>
                </th:block>
            </div>

            <div class="col-md-4">
                <!--搜索框-->
                <div class="sidebar-search">
                    <form method="get" onsubmit="return false;" accept-charset="utf-8">
                        <div class="search-input">
                            <input type="text" name="keyword" id="searchbox" placeholder="输入关键字搜索">
                            <button type="submit" class="search-submit" onclick="search()"></button>
                        </div>
                    </form>
                </div>
                <br/>
                <br/>
                <div style="border-bottom: rgba(65, 131, 196, 0.2) 1px solid; margin-bottom: 3px;">
                    <h1 style="color: #4183c4;">标签</h1>
                </div>
                <div class="tags">
                    <th:block th:if="${tags}">
                        <th:block th:each="tag : ${tags}">
                            <a rel="tag" th:href="@{'/tag/' + ${tag.getTagName()}}">
                                <th:block th:text="${tag.getTagName()}"></th:block>
                            </a>
                        </th:block>
                    </th:block>
                </div>
            </div>
        </div>
    </section>
</div>
</body>
<div th:replace="blog/yummy-jekyll/footer::footer"></div>
</html>